<template>
  <div class="mine">
    <div>
      <!-- 头像 -->
      <el-avatar
        :size="200"
        shape="square"
        :src="mineInfo.headimgurl?mineInfo.headimgurl:defaultAvatarUrl"
      ></el-avatar>

      <!-- description -->
      <el-descriptions title="我的中心" :column="2" border>
        <el-descriptions-item label="unid">
          {{ mineInfo.unid }}
        </el-descriptions-item>
        <el-descriptions-item label="账号">
          {{ mineInfo.username }}
        </el-descriptions-item>
        <el-descriptions-item label="vip等级">
          {{ mineInfo.vipLevel }}
        </el-descriptions-item>
        <el-descriptions-item
          label="VIP到期时间"
          content-class-name="my-content-vipExpires"
        >
          {{ mineInfo.vipExpires }}
        </el-descriptions-item>
        <el-descriptions-item
          label="昵称"
          content-class-name="my-content-nickname"
        >
          {{ mineInfo.nickname }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号">
          {{ mineInfo.phone }}
        </el-descriptions-item>
        <el-descriptions-item label="角色名称">
          {{ mineInfo.roleName }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ mineInfo.sex }}
        </el-descriptions-item>
        <el-descriptions-item label="省份">
          {{ mineInfo.province }}
        </el-descriptions-item>
        <el-descriptions-item label="城市">
          {{ mineInfo.city }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script>
export default {
  name: "mine",
  data() {
    return {
      mineInfo: {},
      defaultAvatarUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
    };
  },
  meta: {
    title: "wdzx",
    icon: "iconfont icon-wode",
  },
  created() {
    let userInfo = localStorage.getItem("yz-userInfo");
    console.log(userInfo);
    this.mineInfo = JSON.parse(userInfo);
  },
};
</script>
<style lang="less" scoped>
/deep/ .my-content-vipExpires {
  background: red;
}
/deep/ .my-content-nickname {
  background: blue;
}
</style>